﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery鼠标移动发出气泡动画</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/sketch.min.js"></script>
	<style>
		body{
			background: #0e0e0e;
		}
	</style>

<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body id="body">
	<div id="test" style=" position:fixed;top:0px;z-index:20;"></div>
	<script>
		function Particle(x, y, radius) {
			this.init(x, y, radius);
		}
		Particle.prototype = {

			init : function(x, y, radius) {

				this.alive = true;

				this.radius = radius || 10;
				this.wander = 0.15;
				this.theta = random(TWO_PI);
				this.drag = 0.92;
				this.color = '#fff';

				this.x = x || 0.0;
				this.y = y || 0.0;

				this.vx = 0.0;
				this.vy = 0.0;
			},

			move : function() {

				this.x += this.vx;
				this.y += this.vy;

				this.vx *= this.drag;
				this.vy *= this.drag;

				this.theta += random(-0.5, 0.5) * this.wander;
				this.vx += sin(this.theta) * 0.1;
				this.vy += cos(this.theta) * 0.1;

				this.radius *= 0.96;
				this.alive = this.radius > 0.5;
			},
			draw : function(ctx) {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}
		var MAX_PARTICLES = 280;
		var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];
		var particles = [];
		var pool = [];
		var demo = Sketch.create({
			container : document.getElementById('test')
		});
		demo.setup = function() {
			// Set off some initial particles.
			var i, x, y;
			//  for ( i = 0; i < 20; i++ ) {
			x = (demo.width * 0.5) + random(-100, 100);
			y = (demo.height * 0.5) + random(-100, 100);
			demo.spawn(0, 999);
			// }
		};

		demo.spawn = function(x, y) {
			if (particles.length >= MAX_PARTICLES)
				pool.push(particles.shift());
			particle = pool.length ? pool.pop() : new Particle();
//			第二个数字控制圆圈大小
			particle.init(x, y, random(5, 10));

			particle.wander = random(0.5, 2.0);
			particle.color = random(COLOURS);
			particle.drag = random(0.9, 0.99);
			theta = random(TWO_PI);
//			第二个数字控制分散距离
			force = random(2,3);
			particle.vx = sin(theta) * force;
			particle.vy = cos(theta) * force;
			particles.push(particle);
		};
		demo.update = function() {
			var i, particle;for (i = particles.length - 1; i >= 0; i--) {
				particle = particles[i];
				if (particle.alive)
					particle.move();
				else
					pool.push(particles.splice(i, 1)[0]);
			}
		};
		demo.draw = function() {
			demo.globalCompositeOperation = 'lighter';
			for ( var i = particles.length - 1; i >= 0; i--) {
				particles[i].draw(demo);
			}
		};
		demo.mousemove = function() {
			var particle, theta, force, touch, max, i, j, n;
			for (i = 0, n = demo.touches.length; i < n; i++) {
//				第二个数字控制密度
				touch = demo.touches[i], max = random(1, 5);
				for (j = 0; j < max; j++) {
					demo.spawn(touch.x, touch.y);
				}
			}
		};
	</script>
</body>
</html>
